要求:圖片要隨畫面調整邊框,且圖片比例要保持,文字疊在圖片上,消除文字底線,滑鼠移上去要有顏色變化。
使用 background-image 來達成文字疊圖片效果。
外框使用flex來自動縮放,且之後安插其他圖片內容會幫你排好,且空間變小會自動換行。
text-decoration:none 消除herf的底線。
transition 與設定bg顏色 達成滑鼠移到圖片上變色。
position 調整文字位置。
HTML:
<div class="mainlayout imagelayout">
<a href="" class="imagecss" style="background-image: url(./img/test.jpg); text-decoration:none;">
<span class="imagetext">電馭叛客邊緣行者hen好看</span>
</a>
</div>
CSS:
.mainlayout {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
}
.imagelayout {
display: flex;
justify-content: space-between;
list-style: none;
flex-wrap: wrap;
width: 100%;
}
.imagecss {
display: flex;
align-items: center;
justify-content: center;
flex: 0 1 100%;
box-sizing: border-box;
overflow: hidden;
margin-bottom: 15px;
height: 200px;
background-size: cover;
background-position: center;
position: relative;
transition: none;
z-index: 0;
}
.imagetext {
font-family: roboto, Arial, sans-serif;
display: flex;
font-weight: 100;
font-weight: lighter;
font-size: 26px;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
padding: 10px;
z-index: 1;
}
.imagecss:after {
background-color: rgba(0, 0, 0, 0.25);
width: 100%;
height: 100%;
position: absolute;
content: '\A';
top: 0;
left: 0;
}
.imagecss:hover:after {
background-color: rgba(0, 0, 0, 0.5);
transition-duration: 100ms;
transition-timing-function: linear;
transition-delay: 0ms;
}